<template>
  <div class="content-wrap content-container" v-loading="loading">
    <!-- 搜索区域 -->
    <el-form class="search-wrap" v-model="searchFormData">
      <el-form-item class="search-wrap-item" label="标题关键字：" prop="projectTitle">
        <el-input width="160px" placeholder="请输入标题关键字" v-model="searchFormData.projectTitle" clearable
                  @keyup.enter="getAllRequirements"></el-input>
      </el-form-item>
      <el-form-item class="search-wrap-item" label="开始时间：" prop="beginTime">
        <el-date-picker style="width: 240px" :value-on-clear="null" type="date" unlink-panels placeholder="选择开始时间"
          v-model="searchFormData.beginTime" format="YYYY/MM/DD" value-format="YYYY-MM-DD"
          @change="getAllRequirements" />
      </el-form-item>

      <el-form-item class="search-wrap-item" label="结束时间：" prop="endTime">
        <el-date-picker style="width: 240px" :value-on-clear="null" type="date" unlink-panels placeholder="选择结束时间"
          v-model="searchFormData.endTime" format="YYYY-MM-DD" value-format="YYYY-MM-DD" @change="getAllRequirements" />
      </el-form-item>
    </el-form>

    <!-- 待上线评审需求列表区域 -->
    <div class="card-wrap-table">
      <!-- 快速搜索 -->
      <div class="card-table-search">
        <el-button :type="activeButton === 'status6' ? 'primary' : 'info'" @click="upAllRequirements6()">
          <span>待上线评审：</span>
          <span style="color: #cca409;">{{ statusCounts.status6 }}</span>
        </el-button>
        <el-button :type="activeButton === 'status7' ? 'primary' : 'info'" @click="upAllRequirements7()">
          <span>等待上线：</span>
          <span style="color: #cca409;">{{ statusCounts.status7 }}</span>
        </el-button>
      </div>
      <!-- 表格区域 -->
      <div class="card-table-box">
        <el-table :data="allRequirements" border style="width: 100%; height: 100%;font-size: 15px;">
          <el-table-column fixed type="index" label="序号" width="60" align="center"></el-table-column>
          <el-table-column label="需求名称" prop="itemRequirementName" min-width="300" show-overflow-tooltip>
            <template #="{ row }">
              <p class="table-requirement-name" @click="handleRowClick(row.itemRequirementId)">{{
                row.itemRequirementName }}</p>
            </template>
          </el-table-column>
          <el-table-column label="技术负责人" prop="requirementBossName" width="100" align="center">
            <template #="{ row }">
              <span>{{ row.requirementBossName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="需求创建人" prop="requirementCreateName" width="100" align="center">
            <template #="{ row }">
              <span>{{ row.requirementCreateName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="负责研发" prop="requirementRelevances" width="160" align="center">
            <template #="{ row }">
              <span>{{ row.requirementRelevances }}</span>
            </template>
          </el-table-column>
          <el-table-column label="负责测试" prop="contactTestNames" width="160" align="center">
            <template #="{ row }">
              <span>{{ row.contactTestNames }}</span>
            </template>
          </el-table-column>
          <el-table-column label="项目经理" prop="requirementManagerName" width="100" align="center">
            <template #="{ row }">
              <span>{{ row.requirementManagerName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="需求状态" prop="requirmentFatherStatus" width="100" align="center">
            <template #="{ row }">
              <span :style="{
                color: fatherStatus(row.requirmentFatherStatus).bgColor,
              }">{{ fatherStatus(row.requirmentFatherStatus).text }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="230" align="center" fixed="right">
            <template #default="{ row }">
              <!-- <el-button
                v-if="row.requirmentFatherStatus === 6 && row.itemRequirementReviewStatus <= 1 && (userAuthId == 333 || userAuthId == 444)"
                size="small" type="primary" @click="dingdingOnlineClick(row.itemRequirementId)">
                通知技术负责人上线评审
              </el-button>
              <el-button
                v-if="row.requirmentFatherStatus === 6 && row.itemRequirementReviewStatus <= 1 && userAuthId != 333 && userAuthId != 444"
                size="small" type="primary" :disabled="true">
                等待项目经理通知上线评审
              </el-button>

              <el-button
                v-if="row.requirmentFatherStatus === 6 && row.itemRequirementReviewStatus === 2 && (userAuthId == 333 || userAuthId == 444)"
                size="small" type="primary" disabled>
                等待技术负责人参与选择上线评审人
              </el-button> -->
              <!-- <el-button type="primary" size="small" @click="handleOpenCases(row)">查看测试用例</el-button> -->
              <!-- <el-tooltip content="查看测试用例" placement="bottom" effect="light"> -->
              <el-button size="small" type="primary" plain @click="handleOpenCases(row)" style="margin-bottom: 5px;">
                <!--                  <el-icon size="14"><List /></el-icon>-->查看
              </el-button>
              <!-- </el-tooltip> -->

              <!-- <el-tooltip content="发起上线评审" placement="bottom" effect="light"> -->
              <el-button size="small" type="warning" plain @click="handleSelectOnlineUsersDialog(row.itemRequirementId)"
                :disabled="!(isViewCase && row.itemRequirementId == isRequirementID)"
                v-if="row.requirmentFatherStatus === 6 && (userAuthId == 333 || userAuthId == 444 || userAuthId == 888 || userAuthId == 999)"
                style="margin-bottom: 5px;">
                <!--                  <el-icon><Pointer /></el-icon>-->上线评审
              </el-button>

              <!-- <el-tooltip content="今天上线" placement="bottom" effect="light"> -->
              <el-button size="small" type="success" plain @click="handleOpenTimeDialog(row)"
                v-if="row.requirmentFatherStatus === 7 && (userAuthId == 333 || userAuthId == 444) && row.guessTime17 == null"
                style="margin-bottom: 5px;">
                <!--                  <el-icon><Clock /></el-icon>-->上线
              </el-button>
              <!-- </el-tooltip> -->

              <!-- <el-tooltip content="核实上线负责任务" placement="bottom" effect="light"> -->
              <el-button
                v-if="row.requirmentFatherStatus === 6 && row.itemRequirementReviewStatus === 3 && (userAuthId == 333 || userAuthId == 444)"
                size="small" type="warning" plain @click="handleCheckOpenDialog(row.itemRequirementId)"
                style="margin-bottom: 5px;">
                <!--                  <el-icon><Operation /></el-icon>-->审核上线
              </el-button>
              <!-- </el-tooltip> -->

              <!-- <el-tooltip content="填写上线评审会议纪要" placement="bottom" effect="light"> -->
              <el-button
                v-if="row.requirmentFatherStatus === 6 && row.itemRequirementReviewStatus === 4 && (userAuthId == 333 || userAuthId == 444)"
                size="small" type="success" plain @click="handleWriteMsgOpenDialog(row.itemRequirementId)"
                style="margin-bottom: 5px;">
                <!--                  <el-icon><Edit /></el-icon>-->填写纪要
              </el-button>
              <!-- </el-tooltip> -->

              <!-- <el-tooltip content="查看上线任务进度" placement="bottom" effect="light"> -->
              <el-button v-if="row.requirmentFatherStatus === 6 && row.itemRequirementReviewStatus >= 3" size="small"
                @click="handleViewsDialog(row.itemRequirementId)" type="primary" plain style="margin-bottom: 5px;">
                <!--                  <el-icon><Odometer /></el-icon>-->进度
              </el-button>
              <!-- </el-tooltip> -->


            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>



    <!-- 今天上线时间 -->
    <el-dialog v-model="dialogOnlineTimeVisible" title="今天上线时间" :close-on-click-modal="false" width="600"
      style="margin-top: 180px;" @close="handleColseDialog" @closed="handleColseDialog">
      <el-form label-position="right" label-width="160px" ref="showNoTipFormRef" v-model="onlineForm">
        <el-form-item label=" 上线时间：" prop="offlineSubmitBareTime">
          <el-time-picker v-model="onlineForm.offlineSubmitBareTime" type="datetime" placeholder="请选择上线时间"
            format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" />
        </el-form-item>
        <el-form-item>
          <div class="dialog-footer" style="width: 100%; display: flex;justify-content: right;">
            <el-button @click="handleColseDialog">取消</el-button>
            <el-button type="primary" @click="postOnlineClick()"> 确定 </el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 上线评审模态框 -->
    <el-dialog v-model="dialogOnlineVisible" title="上线评审" width="600" style="margin-top: 180px;"
      @close="handleColseDialog" @closed="handleColseDialog">
      <el-form label-position="right" label-width="160px" ref="showNoTipFormRef" v-model="onlineForm">
        <el-form-item label=" 上线评审时间：" prop="offlineSubmitBareTime">
          <el-date-picker v-model="onlineForm.offlineSubmitBareTime" type="datetime" placeholder="请选择上线评审时间"
            :disabledDate="disabledDate" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" />
        </el-form-item>
        <el-form-item>
          <!-- <template #footer> -->
          <div class="dialog-footer" style="width: 100%; display: flex;justify-content: right;">
            <el-button @click="handleColseDialog">取消</el-button>
            <el-button type="primary" @click="pushOnlineClick()"> 通过 </el-button>
          </div>
          <!-- </template> -->
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 上线评审会议纪要 -->
    <el-dialog v-model="dialogWriteOnlineVisible" title="上线评审会议纪要" :close-on-click-modal="false" width="1000"
      style="margin-top: 180px;" @close="handleColseWriteOnlineDialog" @closed="handleColseWriteOnlineDialog">
      <el-form label-position="right" label-width="160px" v-model="onlineWirteMsgForm">
        <div class="dialog-footer" style="width: 100%; display: flex;justify-content: left;">
          <p style="font-weight: bold;margin-bottom: 20px;">会议纪要：</p>
        </div>
        <el-input v-model="onlineWirteMsgForm.offlineSubmitBareMsg"
          style="width: 900px;margin-bottom: 20px;margin-right: 20px;" :rows="12" type="textarea"
          placeholder="请输入会议纪要内容">
        </el-input>
        <el-form-item>
          <!-- <template #footer> -->
          <div class="dialog-footer" style="width: 100%;margin-right: 8%; display: flex;justify-content: right;">
            <el-button type="primary" @click="dingdingWriteOnlineMsgClick()"> 提交 </el-button>
          </div>
          <!-- </template> -->
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 选择上线参与人 -->
    <el-dialog v-model="dialogSelectOnlineUsersVisible" title="上线评审参与人确认" width="600" style="margin-top: 180px;"
      @close="handleColseSelectOnlineUsersDialog" @closed="handleColseSelectOnlineUsersDialog">
      <el-form label-position="top" label-width="120px" :model="onlineUsersForm">

        <el-form-item label=" 上线评审时间：" prop="onlineUsersForm" required
          :rules="{ required: true, message: '必填', trigger: ['blur', 'change'] }">
          <el-date-picker v-model="onlineUsersForm.upOnlineTime" type="datetime" placeholder="请选择上线评审时间"
            :disabledDate="disabledDate" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" />
        </el-form-item>

        <el-form-item class="search-wrap-item" label="研发：" required>
          <el-select class="search-select" filterable v-model="onlineUsersForm.devesSelect" placeholder="选择研发"
            size="default" multiple clearable style="min-width: 200px; max-height: 50px; font-weight: normal;">
            <el-option v-for="(item, index) in onlineUsersForm.deves" :key="item.uuid" :label="item.userName"
              :value="item.uuid"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item class="search-wrap-item" label="运维：" required>
          <el-select class="search-select" filterable v-model="onlineUsersForm.msSelect" placeholder="选择运维"
            size="default" multiple clearable style="min-width: 200px; max-height: 50px; font-weight: normal;">
            <el-option v-for="(item, index) in onlineUsersForm.ms" :key="item.uuid" :label="item.userName"
              :value="item.uuid"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item class="search-wrap-item" label="测试：">
          <el-select class="search-select" filterable v-model="onlineUsersForm.tsSelect" placeholder="选择测试"
            size="default" multiple clearable style="min-width: 200px; max-height: 50px; font-weight: normal;">
            <el-option v-for="(item, index) in onlineUsersForm.ts" :key="item.uuid" :label="item.userName"
              :value="item.uuid"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <div class="dialog-footer" style="width: 100%; display: flex;justify-content: right;">
            <el-button type="primary" @click="handleColseSelectOnlineUsersDialog"> 取消 </el-button>
            <el-button type="primary" @click="handleSelectOnlineUsersClick()"> 确定 </el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 核实上线评审模态框 -->
    <el-dialog v-model="dialogCheckOnlineVisible" :close-on-click-modal="false" title="负责【上线任务】各人任务内容" width="1000"
      style="margin-top: 180px;" @close="handleColseOnlineDialog" @closed="handleColseOnlineDialog">
      <el-form label-position="right" label-width="160px" v-model="allbearUsers">
        <h2 style="font-size: 18px;font-weight: bold;line-height: 30px;margin-bottom: 10px;">上线任务：{{
          allbearUsers[0]?.ItemRequirementName }}</h2>
        <div class="dialog-footer" style="width: 100%; display: flex;justify-content: left;">
          <p style="font-weight: bold;margin-bottom: 20px;">
            <span style="width: 100px;float: left;">研发人员：</span>
            <span style="float: left;">上线负责内容：</span>
          </p>
        </div>
        <div v-for="(user, index) in allbearUsers" :key="index">
          <el-input v-if="user.bearType == 1" v-model="user.bearUserName" style="width: 100px;margin-bottom: 20px;"
            disabled placeholder="Please input">
          </el-input>
          <el-input v-if="user.bearType == 1" v-model="user.bearContent"
            style="width: 700px;margin-bottom: 20px;margin-right: 20px;" :rows="1" type="textarea"
            placeholder="请输入负责内容">
          </el-input>
        </div>
        <div class="dialog-footer" style="width: 100%; display: flex;justify-content: left;">
          <p style="font-weight: bold;margin-bottom: 20px;">
            <span style="width: 100px;float: left;">运维人员：</span>
            <span style="float: left;">上线负责内容：</span>
          </p>
        </div>
        <div v-for="(user, index) in allbearUsers" :key="index">
          <el-input v-if="user.bearType == 2" v-model="user.bearUserName" style="width: 100px;margin-bottom: 20px;"
            disabled placeholder="Please input">
          </el-input>
          <el-input v-if="user.bearType == 2" v-model="user.bearContent"
            style="width: 700px;margin-bottom: 20px;margin-right: 20px;" :rows="1" type="textarea"
            placeholder="请输入负责内容">
          </el-input>
        </div>
        <div class="dialog-footer" style="width: 100%; display: flex;justify-content: left;">
          <p style="font-weight: bold;margin-bottom: 20px;">
            <span style="width: 100px;float: left;">测试人员：</span>
            <span style="float: left;">上线负责内容：</span>
          </p>
        </div>
        <div v-for="(user, index) in allbearUsers" :key="index">
          <el-input v-if="user.bearType == 3" v-model="user.bearUserName" style="width: 100px;margin-bottom: 20px;"
            disabled placeholder="Please input">
          </el-input>
          <el-input v-if="user.bearType == 3" v-model="user.bearContent"
            style="width: 700px;margin-bottom: 20px;margin-right: 20px;" :rows="1" type="textarea"
            placeholder="请输入负责内容">
          </el-input>
        </div>
        <!-- 保障人 -->
        <div>
          <div style="display: flex; flex-direction: row; justify-content: flex-start;">
            <div style="display: flex; flex-direction: row; margin-right: 20px;">
              <p style="width: 100px;font-weight: bold;font-size: 14px;line-height: 32px;">保障人：</p>
              <el-select v-model="isBearUserUUID" filterable clear @change="handleBearUserTel(isBearUserUUID)">
                <el-option v-for="(item, index) in bearUserOptions" :key="index" :label="item.bearUserName"
                  :value="item.bearUserUUID"></el-option>
              </el-select>
            </div>
            <div style="display: flex;flex-direction: row;">
              <p style="width: 120px;font-weight: bold;font-size: 14px;line-height: 32px;">保障人电话：</p>
              <el-input type="tel" v-model="isBearUserTel"></el-input>
            </div>
          </div>
        </div>
        <el-form-item>
          <!-- <template #footer> -->
          <div class="dialog-footer" style="width: 100%; display: flex;justify-content: right;">
            <el-button type="primary" @click="saveBareUsersMsgClick()"> 评审完成 </el-button>
          </div>
          <!-- </template> -->
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 查看上线负责内容填写进度 -->
    <el-dialog v-model="dialogCheckDisOnlineVisible" :close-on-click-modal="false" title="请在【上线任务】填写上线负责内容" width="1000"
      style="margin-top: 180px;" @close="handleColseDisOnlineDialog" @closed="handleColseDisOnlineDialog">
      <el-form label-position="right" label-width="160px" v-model="allbearUsers">
        <!-- 研发 -->
        <div class="dialog-footer" style="width: 100%; display: flex;justify-content: left;">
          <p style="font-weight: bold;margin-bottom: 20px;">研发：</p>
        </div>
        <div v-for="(user, index) in allbearUsers" :key="index">
          <el-input v-if="user.bearType == 1" v-model="user.bearUserName" style="width: 100px;margin-bottom: 20px;"
            disabled placeholder="Please input"></el-input>
          <el-input v-if="user.bearType == 1" v-model="user.bearContent"
            style="width: 700px;margin-bottom: 20px;margin-right: 20px;" :rows="1" type="textarea" disabled></el-input>
          <el-button
            v-if="user.bearType == 1 && user.bearContent == '' && (userAuthId == 333 || userAuthId == 444 || userAuthId == 555 || userAuthId == 888 || userAuthId == 999)"
            type="primary" style="margin-bottom: 20px;margin-right: 20px;" @click="dingDingClick(user.bearId)"> 提醒他
          </el-button>
        </div>

        <!-- 运维 -->
        <div class="dialog-footer" style="width: 100%; display: flex;justify-content: left;">
          <p style="font-weight: bold;margin-bottom: 20px;">运维：</p>
        </div>
        <div v-for="(user, index) in allbearUsers" :key="index">
          <el-input v-if="user.bearType == 2" v-model="user.bearUserName" style="width: 100px;margin-bottom: 20px;"
            disabled placeholder="Please input">
          </el-input>
          <el-input v-if="user.bearType == 2" v-model="user.bearContent"
            style="width: 700px;margin-bottom: 20px;margin-right: 20px;" :rows="1" type="textarea" disabled>
          </el-input>
          <el-button
            v-if="user.bearType == 2 && user.bearContent == '' && (userAuthId == 333 || userAuthId == 444 || userAuthId == 555 || userAuthId == 888 || userAuthId == 999)"
            type="primary" style="margin-bottom: 20px;margin-right: 20px;" @click="dingDingClick(user.bearId)"> 提醒他
          </el-button>
        </div>

        <!-- 测试 -->
        <div class="dialog-footer" style="width: 100%; display: flex;justify-content: left;">
          <p style="font-weight: bold;margin-bottom: 20px;">测试：</p>
        </div>
        <div v-for="(user, index) in allbearUsers" :key="index">
          <el-input v-if="user.bearType == 3" v-model="user.bearUserName" style="width: 100px;margin-bottom: 20px;"
            disabled placeholder="Please input">
          </el-input>
          <el-input v-if="user.bearType == 3" v-model="user.bearContent"
            style="width: 700px;margin-bottom: 20px;margin-right: 20px;" :rows="1" type="textarea" disabled>
          </el-input>
          <el-button
            v-if="user.bearType == 3 && user.bearContent == '' && (userAuthId == 333 || userAuthId == 444 || userAuthId == 555 || userAuthId == 888 || userAuthId == 999)"
            type="primary" style="margin-bottom: 20px;margin-right: 20px;" @click="dingDingClick(user.bearId)"> 提醒他
          </el-button>
        </div>

      </el-form>
    </el-dialog>

    <!-- 需求详情弹窗 -->
    <el-dialog v-if="dialogInfoVisible" style="width: 1200px;" v-model="dialogInfoVisible" @close="handleCloseDialog"
      @closed="handleCloseDialog" top="8vh">
      <CommonRequirementInfoVue :isRequirementID="isRequirementID" :clearData="clearData" :isComment="true">
      </CommonRequirementInfoVue>
    </el-dialog>

    <!-- 查看测试用例 -->
    <!-- <el-dialog v-if="dialogCaseVisible" style="width: 1400px; max-height: 760px;" v-model="dialogCaseVisible" title="需求测试用例">
    <InspectRequirementCases :id="isRequirementID" :itemItemId="isRequirementItemId" :visible="dialogCaseVisible" @case-result="handleViewCase"></InspectRequirementCases>
  </el-dialog> -->

    <!-- 查看测试用例 -->
    <el-dialog v-if="dialogCaseVisible" width="1400px" style="min-height: 600px;margin-top: 8vh"
      v-model="dialogCaseVisible" title="查看测试用例" :close-on-click-modal="false" @close="dialogCaseVisible = false">
      <TestRequirementCaseVue :visible="dialogCaseVisible" :testCaseSearch="testCaseSearch" :isOperation="2"
        :isAllCase="true" @case-result="handleViewCase">
      </TestRequirementCaseVue>
    </el-dialog>
  </div>
</template>

<script setup lang='ts'>
import { ref, onMounted, reactive, computed } from 'vue';
import { ElMessage, ElMessageBox, ElNotification, FormInstance, } from "element-plus";
import { fatherStatus, tableTimeDateMsgTow, disabledDate } from "@/utils/utils";
import { useRouter } from "vue-router";
import CommonRequirementInfoVue from "@/components/requirement/comomRequirementInfo.vue";
import InspectRequirementCases from '@/components/requirement/inspectRequirementCases.vue';
import TestRequirementCaseVue from "@/components/requirement/testRequirementCase.vue";
import {
  PostManagerRequirement, //获取项目经理管理项目的所有需求
  GetManagerOnline,
  PostOfflineBearContent,
  PostOfflineBearContentMsg,
  GetGetBareUsersMsgs,//获取上线评审需求各自负责的内容
  GetRoleUser,
  PostUpdateBareUsersMsgs,//更新上线评审需求各自负责的内容
  GetOnlineUsers,//获取上线参与人列表
  PostSelectBareUsers,// 技术负责人分配参与上线人员
  DingDingOnlineWriteBearContents,//提醒填写上线负责任务
  PostSureOnline,// 提交今天上线时间
  GetMyBareMsg,
  GetMyPhoneNumber,// 获取保障人手机号码
} from "@/api/newDemands/index";



/* 参数 */
let router = useRouter();
const loading = ref(false);
const searchFormData = ref({
  projectTitle: "",
  beginTime: null,
  endTime: null,
  requirementStatus: 6,
});//搜索关键字


const userAuthId = ref<any>(null);//当前用户权限id
userAuthId.value = localStorage.getItem("authorityId");
const dialogInfoVisible = ref(false);//查看需求弹窗
const isRequirementID = ref<any>(null);// 当前查看需求id
const isRequirementItemId = ref<any>(null);// 当前需求itemItemId
const clearData = ref(false);//控制是否清空子组件数据
const dialogOnlineVisible = ref(false); //上线评审模态框
const dialogCheckOnlineVisible = ref(false); //核实上线评审内容模态框
const dialogCheckDisOnlineVisible = ref(false); //查看上线评审内容模态框
const dialogWriteOnlineVisible = ref(false); //上线评审会议纪要模态框
const dialogSelectOnlineUsersVisible = ref(false); //选择上线参与人模态框
const dialogOnlineTimeVisible = ref(false); //选择今天上线弹窗
const allbearUsers = ref<any>([]); // 各自负责的上线任务
const statusCounts = reactive({
  status6: 0,
  status7: 0,
});

const isViewCase = ref(false);// 是否查看用例


// 使用 ref 初始化变量
const allRequirements = ref<any[]>([]); // 存储所有数据
const allRequirements6 = ref<any[]>([]); // 存储 status 等于 6 的数据
const allRequirements7 = ref<any[]>([]); // 存储 status 等于 7 的数据
const activeButton = ref(''); // 默认激活第一个按钮
const bearUserOptions = ref<any>([]);// 保障人下拉列表
const isBearUserUUID = ref<any>("");// 选中保障人UUID
const isBearUserTel = ref("");// 当前保障人手机号码

// 提交表单数据
const onlineForm = ref<any>({
  requirementId: null,
  offlineSubmitBareTime: null,
});
// 会议纪要表单数据
const onlineWirteMsgForm = ref<any>({
  requirementId: null,
  offlineSubmitBareMsg: null,
});
// 选择参与上线评审人数据
const onlineUsersForm = ref<any>({
  requirementId: null,
  deves: null,
  ms: null,
  ts: null,
});
const postOnlineUsersForm = ref<any>({
  requirementId: null,
  upOnlineTime: null,
  deves: [],
  ms: [],
  ts: [],
});

// 测试用例
const dialogCaseVisible = ref(false);// 查看测试用例
const testCaseSearch = ref<any>({
  itemItemId: null,
  childId: null,
  isUploadCase: null,
  fatherId: null
}); // 测试用例组件传参


// 查看填写进度
const handleViewsDialog = async (id: number) => {
  postOnlineUsersForm.value.requirementId = id
  loading.value = true
  await getGetBareUsersMsgs(id);
  loading.value = false;
  dialogCheckDisOnlineVisible.value = true;
}


// 开启今天上线弹窗
const handleOpenTimeDialog = (val: any) => {
  onlineForm.value.requirementId = val.itemRequirementId;
  dialogOnlineTimeVisible.value = true;
};
// 核实上线评审内容
const handleCheckOpenDialog = async (id: number) => {
  isRequirementID.value = id;
  onlineForm.value.requirementId = id;
  loading.value = true
  await getGetBareUsersMsgs(id);
  await getRoleUser();
  loading.value = false;
  dialogCheckOnlineVisible.value = true;
};
// 项目经理填写上线评审会议纪要
const handleWriteMsgOpenDialog = (id: number) => {
  onlineWirteMsgForm.value.requirementId = id;
  loading.value = true
  // dingdingWriteOnlineMsgClick(id)
  dialogWriteOnlineVisible.value = true;
};
// 选择上线参与人
const handleSelectOnlineUsersDialog = (id: number) => {
  loading.value = true
  handleGetOnlineUsersClick(id)
  dialogSelectOnlineUsersVisible.value = true;
};
// 取消模态框
const handleColseDialog = () => {
  loading.value = false
  dialogOnlineVisible.value = false;
  dialogOnlineTimeVisible.value = false;
};
const handleColseOnlineDialog = () => {
  loading.value = false
  isBearUserUUID.value = '';
  isBearUserTel.value = '';
  allbearUsers.value = [];
  dialogOnlineVisible.value = false;
};
const handleColseDisOnlineDialog = () => {
  loading.value = false
  allbearUsers.value = [];
  dialogCheckOnlineVisible.value = false;
};
const handleColseWriteOnlineDialog = () => {
  loading.value = false
  dialogWriteOnlineVisible.value = false;
};
const handleColseSelectOnlineUsersDialog = () => {
  loading.value = false
  dialogSelectOnlineUsersVisible.value = false;
};



//选择上线参与人后提交
const handleSelectOnlineUsersClick = async () => {
  postOnlineUsersForm.value.requirementId = onlineUsersForm.value.requirementId;
  postOnlineUsersForm.value.upOnlineTime = onlineUsersForm.value.upOnlineTime;
  if (postOnlineUsersForm.value.upOnlineTime == null) {
    ElMessage.error("上线评审时间必填");
    return;
  };
  postOnlineUsersForm.value.deves = onlineUsersForm.value.deves.filter((item: any) => onlineUsersForm.value.devesSelect.includes(item.uuid));
  postOnlineUsersForm.value.ms = onlineUsersForm.value.ms?.filter((item: any) => onlineUsersForm.value.msSelect.includes(item.uuid));
  postOnlineUsersForm.value.ts = onlineUsersForm.value.ts?.filter((item: any) => onlineUsersForm.value.tsSelect.includes(item.uuid));





  const { data } = await PostSelectBareUsers(postOnlineUsersForm.value);
  if (data.code === 200 && data.data !== null) {
    ElMessage.success(data.msg);
    loading.value = false;
    dialogSelectOnlineUsersVisible.value = false;
    getAllRequirements();
    return;
  } else {
    ElMessage.error(data.msg);
    loading.value = false;
    return;
  }
}
//获取上线参与人列表
const handleGetOnlineUsersClick = async (id: number) => {
  const { data } = await GetOnlineUsers(id);
  if (data.code === 200 && data.data !== null) {
    ElMessage.success(data.msg);
    loading.value = false;
    onlineUsersForm.value = {
      ts: data.data.Ts?.map((item: any) => ({
        childId: item.requirementChildId,
        userName: item.userName,
        uuid: item.uuid,
      })),
      ms: data.data.Ms?.map((item: any) => ({
        childId: item.requirementChildId,
        userName: item.userName,
        uuid: item.uuid,
      })),
      deves: data.data.Deves?.map((item: any) => ({
        childId: item.requirementChildId,
        userName: item.userName,
        uuid: item.uuid,
      })),
    };
    onlineUsersForm.value.devesSelect = [];
    onlineUsersForm.value.msSelect = [];
    onlineUsersForm.value.tsSelect = [];
    onlineUsersForm.value.requirementId = id;
    return;
  } else {
    ElMessage.error(data.msg);
    loading.value = false;
    return;
  }
}
//提醒他
const dingDingClick = async (id: number) => {
  const { data } = await DingDingOnlineWriteBearContents(id);
  if (data.code === 200 && data.data !== null) {
    ElMessage.success(data.msg);
    loading.value = false;
    return;
  } else {
    ElMessage.error(data.msg);
    loading.value = false;
    return;
  }
}

//核实上线评审内容
const getGetBareUsersMsgs = async (id: number) => {
  const { data } = await GetGetBareUsersMsgs(id);
  if (data.code === 200 && data.data !== null) {
    ElMessage.success(data.msg);
    loading.value = false;
    allbearUsers.value = data.data.map((item: any) => {
      return {
        bearUserName: item.bearUserName,
        bearContent: item.bearContent,
        bearType: item.bearType,
        bearId: item.ID,
        ItemRequirementName: item.ItemRequirementName,
      }
    });

  } else {
    ElMessage.error(data.msg);
    loading.value = false;
    return;
  }
}
//获取所有保障人名单
const getRoleUser = async () => {
  const { data } = await GetRoleUser();
  if (data.code === 200 && data.data !== null) {
    ElMessage.success(data.msg);
    loading.value = false;
    bearUserOptions.value = data.data.map((item: any) => {
      return {
        bearUserName: item.nickName,
        bearUserUUID: item.uuid
      }
    })
  } else {
    ElMessage.error(data.msg);
    loading.value = false;
    return;
  }
}


// 查看需求详情
const handleRowClick = async (id: number) => {
  dialogInfoVisible.value = true;
  isRequirementID.value = id;
};

// 关闭查看需求弹窗
const handleCloseDialog = () => {
  dialogInfoVisible.value = false;
  clearData.value = true;
};


// 今天上线时间
const postOnlineClick = async () => {
  if (onlineForm.value.offlineSubmitBareTime == null) {
    ElMessage.error("上线时间必填");
    return;
  }

  const { data } = await PostSureOnline({
    requirementId: onlineForm.value.requirementId,
    // offlineSubmitBareTime: tableTimeDateMsgTow(onlineForm.value.offlineSubmitBareTime),
    offlineSubmitBareTime: onlineForm.value.offlineSubmitBareTime,
  });
  if (data.code === 200) {
    ElMessage.success(data.msg);
    handleColseDialog();
    loading.value = true;
    await getAllRequirements();
    loading.value = false;
    return;
  } else {
    ElMessage.error(data.msg);
    throw console.error(data.msg);
  }
};

// 项目经理发起上线评审
const pushOnlineClick = async () => {
  loading.value = true;
  const { data } = await PostOfflineBearContent({
    requirementId: onlineForm.value.requirementId,
    offlineSubmitBareTime: onlineForm.value.offlineSubmitBareTime,
  })
  if (data.code === 200 && data.data !== null) {
    ElMessage.success(data.msg);
    loading.value = false;
    handleColseDialog();
    getAllRequirements();
    return;
  } else {
    ElMessage.error(data.msg);
    loading.value = false;
    handleColseDialog()
    return;
  }
};
// 通知技术负责人上线评审
const dingdingOnlineClick = async (id: number) => {
  loading.value = true;
  const { data } = await GetManagerOnline(id)
  if (data.code === 200 && data.data !== null) {
    ElMessage.success(data.msg);
    loading.value = false;
    getAllRequirements();
    return;
  } else {
    ElMessage.error(data.msg);
    loading.value = false;
    return;
  }
};
// 项目经理填写上线评审会议纪要
const dingdingWriteOnlineMsgClick = async () => {
  loading.value = true;
  const { data } = await PostOfflineBearContentMsg(onlineWirteMsgForm.value)
  if (data.code === 200 && data.data !== null) {
    ElMessage.success(data.msg);
    loading.value = false;
    dialogWriteOnlineVisible.value = false;
    getAllRequirements();
    return;
  } else {
    ElMessage.error(data.msg);
    loading.value = false;
    return;
  }
};

// 更新每人负责的内容
const saveBareUsersMsgClick = async () => {
  if (isBearUserUUID.value == '' || isBearUserTel.value == '' || allbearUsers.value.some((item: any) => !item.bearContent)) {
    ElMessage.error("所有项都为必填");
    return;
  }
  await ElMessageBox.confirm("上线评审完成，完成状态变更！", "确定", {
    cancelButtonText: "取消",
    confirmButtonText: "确定",
    type: "warning",
  }).then(async () => {

    const { data } = await PostUpdateBareUsersMsgs({
      requirementId: isRequirementID.value,
      requirementSecurityUUID: isBearUserUUID.value,
      requirementSecurityIphone: isBearUserTel.value,
      bares: allbearUsers.value
    });
    if (data.code === 200 && data.data !== null) {
      ElMessage.success(data.msg);
      loading.value = false;
      dialogCheckOnlineVisible.value = false
      await getAllRequirements()
      return;
    } else {
      ElMessage.error(data.msg);
      loading.value = false;
      return;
    }
  }).catch((error) => {
    throw console.error(error);
  })
};


const upAllRequirements6 = async () => {
  allRequirements.value = allRequirements6.value
  activeButton.value = 'status6';
}
const upAllRequirements7 = async () => {
  allRequirements.value = allRequirements7.value
  activeButton.value = 'status7';
}



// TODO 获取所有待上线评审需求
const getAllRequirements = async () => {
  loading.value = true;
  const { data } = await PostManagerRequirement({
    projectTitle: searchFormData.value.projectTitle,
    beginTime:
      searchFormData.value.beginTime,
    endTime:
      searchFormData.value.endTime,
  });

  if (data.code === 200 && data.data !== null) {
    activeButton.value = "";
    // 清空之前的存储（可选）
    allRequirements.value = [];
    allRequirements6.value = [];
    allRequirements7.value = [];

    statusCounts.status6 = data.data.filter(
      (item: any) => item.requirmentFatherStatus === 6
    ).length;
    statusCounts.status7 = data.data.filter(
      (item: any) => item.requirmentFatherStatus === 7 && item.guessTime17 == null
    ).length;


    // 遍历数据并分类存储
    data.data.forEach((item: any) => {
      const mappedItem = {
        itemRequirementId: item.ID, // 需求id
        itemRequirementName: item.requirementName, // 需求名称
        requirementBossName: item.requirementBossName, // 技术负责人
        requirementManagerName: item.requirementManagerName, // 项目经理名称
        requirementCreateName: item.requirementCreateName, // 需求创建人
        contactTestNames: item.contactTestNames, // 负责测试
        requirementRelevances: item.requirementRelevances, // 负责研发
        requirmentFatherStatus: item.requirmentFatherStatus, // 需求当前状态
        itemRequirementReviewStatus: item.itemRequirementReviewStatus, // 当前上线评审状态
        guessTime17: item.guessTime17, // 上线时间
      };

      // 存储到 allRequirements
      allRequirements.value.push(mappedItem);

      // 根据 status 存储到对应的数组
      if (item.requirmentFatherStatus === 6) {
        allRequirements6.value.push(mappedItem);
      } else if (item.requirmentFatherStatus === 7 && item.guessTime17 == null) {
        allRequirements7.value.push(mappedItem);
      }
    });
    ElMessage.success(data.msg);
    loading.value = false;
    return;
  } else {
    ElMessage.error(data.msg);
    loading.value = false;
    return;
  }
};

// TODO 当保障人发生变化时，获取该保障人的手机号码
const handleBearUserTel = async (uuid: string) => {
  const { data } = await GetMyPhoneNumber(uuid);
  if (data.code === 200) {
    isBearUserTel.value = data.data;
    return;
  } else {
    ElMessage.error(data.msg);
    throw console.error(data.msg);
  }
};

// TODO 开启查看测试用例弹窗
const handleOpenCases = async (row: any) => {
  isRequirementID.value = row.itemRequirementId;
  // isRequirementItemId.value = row.ItemItemId ? row.ItemItemId : null;
  // isViewCase.value = true;
  testCaseSearch.value = {
    itemItemId: null,
    childId: null,
    isUploadCase: null,
    fatherId: row.itemRequirementId
  };
  dialogCaseVisible.value = true;
};

// TODO
const handleViewCase = (res: any) => {
  isViewCase.value = res;
};


// 页面初始化调用接口
onMounted(async () => {
  getAllRequirements()
});

</script>
<style lang='scss' scoped>
.content-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  // overflow-y: auto;

  // TODO 搜索区域
  .search-wrap {
    width: 100%;
    height: 60px;
    margin-bottom: 10px;
    display: flex;
    justify-content: flex-start;

    .search-wrap-item {
      margin-right: 10px;
      margin-bottom: 0;
      min-width: 200px;
      font-weight: bold;
      font-size: 24px;
      font-family: Arial, Helvetica, sans-serif;
      color: #000;
    }
  }

  ;

  // 列表区域
  .card-wrap-table {
    width: 100%;
    height: calc(100% - 60px);
    display: flex;
    flex-direction: column;

    // 快速搜索区域
    .card-table-search {
      width: 100%;
      height: 30px;
      margin-bottom: 10px;
    }

    .card-table-box {
      max-height: calc(100% - 40px);
      background-color: red;
      overflow-y: auto;
    }
  }

  .table-requirement-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .table-requirement-name:hover {
    cursor: pointer;
    color: #409EFF;
  }

}
</style>
